<template>
  <div class="custom-select-example">
    <h2>CustomSelect 组件使用示例 (Vue 3)</h2>
    
    <!-- 基础用法 -->
    <div class="example-section">
      <h3>1. 基础用法</h3>
      <CustomSelect
        v-model="basicValue"
        :options="basicOptions"
        placeholder="请选择一个选项"
        width="200px"
        @change="handleBasicChange"
      />
      <p>选中值: {{ basicValue }}</p>
    </div>

    <!-- 不同尺寸 -->
    <div class="example-section">
      <h3>2. 不同尺寸</h3>
      <div class="size-demo">
        <CustomSelect
          v-model="sizeValue1"
          :options="basicOptions"
          size="large"
          placeholder="Large"
          width="150px"
        />
        <CustomSelect
          v-model="sizeValue2"
          :options="basicOptions"
          size="medium"
          placeholder="Medium"
          width="150px"
        />
        <CustomSelect
          v-model="sizeValue3"
          :options="basicOptions"
          size="small"
          placeholder="Small"
          width="150px"
        />
        <CustomSelect
          v-model="sizeValue4"
          :options="basicOptions"
          size="mini"
          placeholder="Mini"
          width="150px"
        />
      </div>
    </div>

    <!-- 多选模式 -->
    <div class="example-section">
      <h3>3. 多选模式</h3>
      <CustomSelect
        v-model="multipleValue"
        :options="basicOptions"
        multiple
        placeholder="请选择多个选项"
        width="300px"
        collapse-tags
        @change="handleMultipleChange"
      />
      <p>选中值: {{ multipleValue }}</p>
    </div>

    <!-- 可搜索 -->
    <div class="example-section">
      <h3>4. 可搜索</h3>
      <CustomSelect
        v-model="searchValue"
        :options="searchOptions"
        filterable
        placeholder="输入关键词搜索"
        width="250px"
      />
      <p>选中值: {{ searchValue }}</p>
    </div>

    <!-- 自定义选项属性 -->
    <div class="example-section">
      <h3>5. 自定义选项属性</h3>
      <CustomSelect
        v-model="customValue"
        :options="customOptions"
        :option-props="customOptionProps"
        placeholder="自定义属性映射"
        width="200px"
      />
      <p>选中值: {{ customValue }}</p>
    </div>

    <!-- 分组选项 -->
    <div class="example-section">
      <h3>6. 分组选项</h3>
      <CustomSelect
        v-model="groupValue"
        :grouped-options="groupedOptions"
        placeholder="分组选择"
        width="200px"
      />
      <p>选中值: {{ groupValue }}</p>
    </div>

    <!-- 禁用状态 -->
    <div class="example-section">
      <h3>7. 禁用状态</h3>
      <CustomSelect
        v-model="disabledValue"
        :options="basicOptions"
        disabled
        placeholder="禁用状态"
        width="200px"
      />
    </div>

    <!-- 不可清空 -->
    <div class="example-section">
      <h3>8. 不可清空</h3>
      <CustomSelect
        v-model="noClearValue"
        :options="basicOptions"
        :clearable="false"
        placeholder="不可清空"
        width="200px"
      />
    </div>

    <!-- 加载状态 -->
    <div class="example-section">
      <h3>9. 加载状态</h3>
      <CustomSelect
        v-model="loadingValue"
        :options="basicOptions"
        :loading="isLoading"
        loading-text="数据加载中..."
        placeholder="加载状态"
        width="200px"
      />
      <el-button @click="toggleLoading" size="small">切换加载状态</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CustomSelect from './index.vue'

// 基础用法
const basicValue = ref('')
const basicOptions = ref([
  { label: '选项一', value: 'option1' },
  { label: '选项二', value: 'option2' },
  { label: '选项三', value: 'option3' },
  { label: '选项四', value: 'option4' }
])

// 不同尺寸
const sizeValue1 = ref('')
const sizeValue2 = ref('')
const sizeValue3 = ref('')
const sizeValue4 = ref('')

// 多选
const multipleValue = ref([])

// 可搜索
const searchValue = ref('')
const searchOptions = ref([
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' },
  { label: '杭州', value: 'hangzhou' },
  { label: '南京', value: 'nanjing' },
  { label: '武汉', value: 'wuhan' },
  { label: '成都', value: 'chengdu' }
])

// 自定义属性
const customValue = ref('')
const customOptions = ref([
  { name: '苹果', id: 'apple', isDisabled: false },
  { name: '香蕉', id: 'banana', isDisabled: false },
  { name: '橙子', id: 'orange', isDisabled: true },
  { name: '葡萄', id: 'grape', isDisabled: false }
])
const customOptionProps = ref({
  label: 'name',
  value: 'id',
  disabled: 'isDisabled'
})

// 分组
const groupValue = ref('')
const groupedOptions = ref([
  {
    label: '热门城市',
    options: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' }
    ]
  },
  {
    label: '城市名',
    options: [
      { label: '成都', value: 'chengdu' },
      { label: '西安', value: 'xian' }
    ]
  }
])

// 其他状态
const disabledValue = ref('option1')
const noClearValue = ref('')
const loadingValue = ref('')
const isLoading = ref(true)

// 方法
const handleBasicChange = (value) => {
  console.log('基础选择改变:', value)
}

const handleMultipleChange = (value) => {
  console.log('多选改变:', value)
}

const toggleLoading = () => {
  isLoading.value = !isLoading.value
}
</script>

<style scoped>
.custom-select-example {
  padding: 20px;
  max-width: 800px;
}

.example-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.example-section h3 {
  margin-top: 0;
  color: #303133;
}

.size-demo {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.size-demo > * {
  margin-bottom: 10px;
}

p {
  margin: 10px 0;
  color: #606266;
  font-size: 14px;
}
</style> 